<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hyperledger Fabric 资产追踪系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        accent: '#722ED1',
                        neutral: '#1D2129',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            .bg-glass {
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(10px);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white border-b border-gray-200 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
                    <i class="fa fa-link text-white text-xl"></i>
                </div>
                <h1 class="text-xl font-bold bg-gradient-to-r from-primary to-secondary text-gradient">资产追踪系统</h1>
            </div>
            
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#dashboard" class="text-neutral hover:text-primary transition-colors font-medium">仪表盘</a>
                <a href="#create" class="text-neutral hover:text-primary transition-colors font-medium">创建资产</a>
                <a href="#query" class="text-neutral hover:text-primary transition-colors font-medium">查询资产</a>
                <a href="#transfer" class="text-neutral hover:text-primary transition-colors font-medium">转移资产</a>
            </nav>
            
            <div class="md:hidden">
                <button id="menu-toggle" class="text-neutral hover:text-primary">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
                <a href="#dashboard" class="text-neutral hover:text-primary transition-colors py-2 font-medium">仪表盘</a>
                <a href="#create" class="text-neutral hover:text-primary transition-colors py-2 font-medium">创建资产</a>
                <a href="#query" class="text-neutral hover:text-primary transition-colors py-2 font-medium">查询资产</a>
                <a href="#transfer" class="text-neutral hover:text-primary transition-colors py-2 font-medium">转移资产</a>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 仪表盘 -->
        <section id="dashboard" class="mb-12 scroll-mt-24">
            <div class="text-center mb-8">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral mb-2">区块链资产追踪仪表盘</h2>
                <p class="text-info max-w-2xl mx-auto">通过这个界面，你可以轻松管理和追踪链上资产，包括创建新资产、查询现有资产以及转移资产所有权。</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                <div class="bg-white rounded-xl p-6 card-shadow transform hover:scale-[1.02] transition-all duration-300">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-lg text-neutral">总资产生成量</h3>
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                            <i class="fa fa-cubes text-primary"></i>
                        </div>
                    </div>
                    <p class="text-3xl font-bold text-neutral" id="total-assets">0</p>
                    <p class="text-info text-sm mt-2">自系统上线以来</p>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-shadow transform hover:scale-[1.02] transition-all duration-300">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-lg text-neutral">今日资产转移</h3>
                        <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center">
                            <i class="fa fa-exchange text-secondary"></i>
                        </div>
                    </div>
                    <p class="text-3xl font-bold text-neutral" id="today-transfers">0</p>
                    <p class="text-info text-sm mt-2">2025年5月27日</p>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-shadow transform hover:scale-[1.02] transition-all duration-300">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-lg text-neutral">活跃用户</h3>
                        <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center">
                            <i class="fa fa-users text-accent"></i>
                        </div>
                    </div>
                    <p class="text-3xl font-bold text-neutral" id="active-users">0</p>
                    <p class="text-info text-sm mt-2">过去30天内</p>
                </div>
            </div>
            
            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="font-semibold text-lg text-neutral mb-4">资产活动趋势</h3>
                <div class="h-64">
                    <canvas id="activity-chart"></canvas>
                </div>
            </div>
        </section>
        
        <!-- 创建资产 -->
        <section id="create" class="mb-12 scroll-mt-24">
            <div class="bg-white rounded-xl p-6 md:p-8 card-shadow">
                <div class="flex items-center mb-6">
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                        <i class="fa fa-plus text-primary"></i>
                    </div>
                    <h2 class="text-xl font-bold text-neutral">创建新资产</h2>
                </div>
                
                <form id="create-asset-form" class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="create-id" class="block text-sm font-medium text-neutral mb-1">资产ID <span class="text-danger">*</span></label>
                            <input type="text" id="create-id" name="id" required 
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all outline-none"
                                placeholder="输入唯一的资产标识符">
                        </div>
                        
                        <div>
                            <label for="create-owner" class="block text-sm font-medium text-neutral mb-1">所有者 <span class="text-danger">*</span></label>
                            <input type="text" id="create-owner" name="owner" required
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all outline-none"
                                placeholder="输入资产所有者">
                        </div>
                        
                        <div>
                            <label for="create-name" class="block text-sm font-medium text-neutral mb-1">资产名称 <span class="text-danger">*</span></label>
                            <input type="text" id="create-name" name="name" required
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all outline-none"
                                placeholder="输入资产名称">
                        </div>
                        
                        <div>
                            <label for="create-info" class="block text-sm font-medium text-neutral mb-1">资产信息</label>
                            <input type="text" id="create-info" name="info"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all outline-none"
                                placeholder="输入资产详细信息（可选）">
                        </div>
                    </div>
                    
                    <div class="flex justify-end">
                        <button type="submit" class="px-6 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all flex items-center space-x-2">
                            <i class="fa fa-plus-circle"></i>
                            <span>创建资产</span>
                        </button>
                    </div>
                </form>
                
                <div id="create-result" class="mt-6 hidden">
                    <div class="p-4 rounded-lg border border-gray-200 bg-gray-50">
                        <h4 class="font-medium text-neutral mb-2">操作结果</h4>
                        <div id="create-success" class="hidden">
                            <div class="flex items-start space-x-3 text-success">
                                <i class="fa fa-check-circle mt-1"></i>
                                <div>
                                    <p class="font-medium">资产创建成功！</p>
                                    <p class="text-sm">资产ID: <span id="created-id" class="font-semibold"></span></p>
                                </div>
                            </div>
                        </div>
                        <div id="create-error" class="hidden">
                            <div class="flex items-start space-x-3 text-danger">
                                <i class="fa fa-exclamation-circle mt-1"></i>
                                <div>
                                    <p class="font-medium">资产创建失败</p>
                                    <p id="create-error-message" class="text-sm"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 查询资产 -->
        <section id="query" class="mb-12 scroll-mt-24">
            <div class="bg-white rounded-xl p-6 md:p-8 card-shadow">
                <div class="flex items-center mb-6">
                    <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center mr-4">
                        <i class="fa fa-search text-secondary"></i>
                    </div>
                    <h2 class="text-xl font-bold text-neutral">查询资产</h2>
                </div>
                
                <form id="query-asset-form" class="space-y-6">
                    <div>
                        <label for="query-id" class="block text-sm font-medium text-neutral mb-1">资产ID <span class="text-danger">*</span></label>
                        <input type="text" id="query-id" name="id" required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary/50 focus:border-secondary transition-all outline-none"
                            placeholder="输入要查询的资产ID">
                    </div>
                    
                    <div class="flex justify-end">
                        <button type="submit" class="px-6 py-2 bg-secondary hover:bg-secondary/90 text-white rounded-lg transition-all flex items-center space-x-2">
                            <i class="fa fa-search"></i>
                            <span>查询资产</span>
                        </button>
                    </div>
                </form>
                
                <div id="query-result" class="mt-6 hidden">
                    <div class="p-4 rounded-lg border border-gray-200 bg-gray-50">
                        <h4 class="font-medium text-neutral mb-2">查询结果</h4>
                        <div id="query-found" class="hidden">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <p class="text-sm text-info mb-1">资产ID</p>
                                    <p id="query-result-id" class="font-semibold"></p>
                                </div>
                                <div>
                                    <p class="text-sm text-info mb-1">所有者</p>
                                    <p id="query-result-owner" class="font-semibold"></p>
                                </div>
                                <div>
                                    <p class="text-sm text-info mb-1">资产名称</p>
                                    <p id="query-result-name" class="font-semibold"></p>
                                </div>
                                <div>
                                    <p class="text-sm text-info mb-1">资产信息</p>
                                    <p id="query-result-info" class="font-semibold"></p>
                                </div>
                            </div>
                        </div>
                        <div id="query-not-found" class="hidden">
                            <div class="flex items-start space-x-3 text-danger">
                                <i class="fa fa-exclamation-circle mt-1"></i>
                                <div>
                                    <p class="font-medium">未找到该资产</p>
                                    <p class="text-sm">请检查输入的资产ID是否正确</p>
                                </div>
                            </div>
                        </div>
                        <div id="query-error" class="hidden">
                            <div class="flex items-start space-x-3 text-danger">
                                <i class="fa fa-exclamation-circle mt-1"></i>
                                <div>
                                    <p class="font-medium">查询失败</p>
                                    <p id="query-error-message" class="text-sm"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 转移资产 -->
        <section id="transfer" class="mb-12 scroll-mt-24">
            <div class="bg-white rounded-xl p-6 md:p-8 card-shadow">
                <div class="flex items-center mb-6">
                    <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center mr-4">
                        <i class="fa fa-exchange text-accent"></i>
                    </div>
                    <h2 class="text-xl font-bold text-neutral">转移资产</h2>
                </div>
                
                <form id="transfer-asset-form" class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="transfer-id" class="block text-sm font-medium text-neutral mb-1">资产ID <span class="text-danger">*</span></label>
                            <input type="text" id="transfer-id" name="id" required
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent/50 focus:border-accent transition-all outline-none"
                                placeholder="输入要转移的资产ID">
                        </div>
                        
                        <div>
                            <label for="transfer-owner" class="block text-sm font-medium text-neutral mb-1">新所有者 <span class="text-danger">*</span></label>
                            <input type="text" id="transfer-owner" name="owner" required
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent/50 focus:border-accent transition-all outline-none"
                                placeholder="输入新的资产所有者">
                        </div>
                    </div>
                    
                    <div class="flex justify-end">
                        <button type="submit" class="px-6 py-2 bg-accent hover:bg-accent/90 text-white rounded-lg transition-all flex items-center space-x-2">
                            <i class="fa fa-exchange"></i>
                            <span>转移资产</span>
                        </button>
                    </div>
                </form>
                
                <div id="transfer-result" class="mt-6 hidden">
                    <div class="p-4 rounded-lg border border-gray-200 bg-gray-50">
                        <h4 class="font-medium text-neutral mb-2">操作结果</h4>
                        <div id="transfer-success" class="hidden">
                            <div class="flex items-start space-x-3 text-success">
                                <i class="fa fa-check-circle mt-1"></i>
                                <div>
                                    <p class="font-medium">资产转移成功！</p>
                                    <p class="text-sm">资产ID: <span id="transferred-id" class="font-semibold"></span></p>
                                    <p class="text-sm">新所有者: <span id="transferred-owner" class="font-semibold"></span></p>
                                </div>
                            </div>
                        </div>
                        <div id="transfer-error" class="hidden">
                            <div class="flex items-start space-x-3 text-danger">
                                <i class="fa fa-exclamation-circle mt-1"></i>
                                <div>
                                    <p class="font-medium">资产转移失败</p>
                                    <p id="transfer-error-message" class="text-sm"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral text-white py-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
                            <i class="fa fa-link text-white text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">资产追踪系统</h3>
                    </div>
                    <p class="text-gray-400 mb-4">基于Hyperledger Fabric的区块链资产追踪解决方案，为企业提供安全、透明、高效的资产数字化管理服务。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                    <ul class="space-y-2">
                        <li><a href="#dashboard" class="text-gray-400 hover:text-white transition-colors">仪表盘</a></li>
                        <li><a href="#create" class="text-gray-400 hover:text-white transition-colors">创建资产</a></li>
                        <li><a href="#query" class="text-gray-400 hover:text-white transition-colors">查询资产</a></li>
                        <li><a href="#transfer" class="text-gray-400 hover:text-white transition-colors">转移资产</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                    <ul class="space-y-2">
                        <li class="flex items-start space-x-3">
                            <i class="fa fa-envelope-o mt-1 text-gray-400"></i>
                            <span class="text-gray-400">contact@asset-tracker.com</span>
                        </li>
                        <li class="flex items-start space-x-3">
                            <i class="fa fa-phone mt-1 text-gray-400"></i>
                            <span class="text-gray-400">+86 123 4567 8910</span>
                        </li>
                        <li class="flex items-start space-x-3">
                            <i class="fa fa-map-marker mt-1 text-gray-400"></i>
                            <span class="text-gray-400">北京市海淀区中关村科技园区</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
                <p>© 2025 资产追踪系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        // 导航菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 10) {
                navbar.classList.add('shadow-md');
            } else {
                navbar.classList.remove('shadow-md');
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    // 关闭移动菜单（如果打开）
                    document.getElementById('mobile-menu').classList.add('hidden');
                    
                    // 滚动到目标位置
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // 模拟数据和图表
        document.addEventListener('DOMContentLoaded', function() {
            // 设置仪表盘数据
            document.getElementById('total-assets').textContent = '1,284';
            document.getElementById('today-transfers').textContent = '42';
            document.getElementById('active-users').textContent = '156';
            
            // 创建图表
            const ctx = document.getElementById('activity-chart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    datasets: [{
                        label: '资产创建',
                        data: [65, 78, 90, 120, 145, 160, 180, 195, 210, 230, 250, 280],
                        borderColor: '#165DFF',
                        backgroundColor: 'rgba(22, 93, 255, 0.1)',
                        tension: 0.4,
                        fill: true
                    }, {
                        label: '资产转移',
                        data: [30, 45, 60, 75, 90, 110, 130, 145, 160, 175, 190, 210],
                        borderColor: '#0FC6C2',
                        backgroundColor: 'rgba(15, 198, 194, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
            
            // 表单提交处理
            document.getElementById('create-asset-form').addEventListener('submit', function(e) {
                e.preventDefault();
                handleCreateAsset();
            });
            
            document.getElementById('query-asset-form').addEventListener('submit', function(e) {
                e.preventDefault();
                handleQueryAsset();
            });
            
            document.getElementById('transfer-asset-form').addEventListener('submit', function(e) {
                e.preventDefault();
                handleTransferAsset();
            });
        });
        
        // 处理创建资产
        function handleCreateAsset() {
            const form = document.getElementById('create-asset-form');
            const formData = new FormData(form);
            const assetData = Object.fromEntries(formData.entries());
            
            // 显示结果区域
            const resultContainer = document.getElementById('create-result');
            resultContainer.classList.remove('hidden');
            
            // 模拟API调用
            simulateApiCall('create', assetData)
                .then(response => {
                    // 隐藏所有结果状态
                    document.getElementById('create-success').classList.add('hidden');
                    document.getElementById('create-error').classList.add('hidden');
                    
                    if (response.success) {
                        // 显示成功状态
                        document.getElementById('create-success').classList.remove('hidden');
                        document.getElementById('created-id').textContent = response.data.id;
                        
                        // 重置表单
                        form.reset();
                    } else {
                        // 显示错误状态
                        document.getElementById('create-error').classList.remove('hidden');
                        document.getElementById('create-error-message').textContent = response.message;
                    }
                })
                .catch(error => {
                    // 显示错误状态
                    document.getElementById('create-success').classList.add('hidden');
                    document.getElementById('create-error').classList.remove('hidden');
                    document.getElementById('create-error-message').textContent = error.message || '创建资产时发生未知错误';
                });
        }
        
        // 处理查询资产
        function handleQueryAsset() {
            const form = document.getElementById('query-asset-form');
            const formData = new FormData(form);
            const assetId = formData.get('id');
            
            // 显示结果区域
            const resultContainer = document.getElementById('query-result');
            resultContainer.classList.remove('hidden');
            
            // 模拟API调用
            simulateApiCall('query', { id: assetId })
                .then(response => {
                    // 隐藏所有结果状态
                    document.getElementById('query-found').classList.add('hidden');
                    document.getElementById('query-not-found').classList.add('hidden');
                    document.getElementById('query-error').classList.add('hidden');
                    
                    if (response.success) {
                        if (response.data) {
                            // 显示查询结果
                            document.getElementById('query-found').classList.remove('hidden');
                            document.getElementById('query-result-id').textContent = response.data.id;
                            document.getElementById('query-result-owner').textContent = response.data.owner;
                            document.getElementById('query-result-name').textContent = response.data.name;
                            document.getElementById('query-result-info').textContent = response.data.info || '无额外信息';
                        } else {
                            // 显示未找到状态
                            document.getElementById('query-not-found').classList.remove('hidden');
                        }
                    } else {
                        // 显示错误状态
                        document.getElementById('query-error').classList.remove('hidden');
                        document.getElementById('query-error-message').textContent = response.message;
                    }
                })
                .catch(error => {
                    // 显示错误状态
                    document.getElementById('query-found').classList.add('hidden');
                    document.getElementById('query-not-found').classList.add('hidden');
                    document.getElementById('query-error').classList.remove('hidden');
                    document.getElementById('query-error-message').textContent = error.message || '查询资产时发生未知错误';
                });
        }
        
        // 处理转移资产
        function handleTransferAsset() {
            const form = document.getElementById('transfer-asset-form');
            const formData = new FormData(form);
            const transferData = Object.fromEntries(formData.entries());
            
            // 显示结果区域
            const resultContainer = document.getElementById('transfer-result');
            resultContainer.classList.remove('hidden');
            
            // 模拟API调用
            simulateApiCall('transfer', transferData)
                .then(response => {
                    // 隐藏所有结果状态
                    document.getElementById('transfer-success').classList.add('hidden');
                    document.getElementById('transfer-error').classList.add('hidden');
                    
                    if (response.success) {
                        // 显示成功状态
                        document.getElementById('transfer-success').classList.remove('hidden');
                        document.getElementById('transferred-id').textContent = response.data.id;
                        document.getElementById('transferred-owner').textContent = response.data.owner;
                        
                        // 重置表单
                        form.reset();
                    } else {
                        // 显示错误状态
                        document.getElementById('transfer-error').classList.remove('hidden');
                        document.getElementById('transfer-error-message').textContent = response.message;
                    }
                })
                .catch(error => {
                    // 显示错误状态
                    document.getElementById('transfer-success').classList.add('hidden');
                    document.getElementById('transfer-error').classList.remove('hidden');
                    document.getElementById('transfer-error-message').textContent = error.message || '转移资产时发生未知错误';
                });
        }
        
        // 模拟API调用
        function simulateApiCall(action, data) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    // 模拟API响应
                    try {
                        // 模拟成功或失败的响应
                        const isSuccess = Math.random() > 0.2; // 80%成功率
                        
                        if (isSuccess) {
                            let responseData = null;
                            
                            if (action === 'create') {
                                responseData = {
                                    id: data.id,
                                    owner: data.owner,
                                    name: data.name,
                                    info: data.info
                                };
                            } else if (action === 'query') {
                                if (data.id === 'ASSET-001') {
                                    responseData = {
                                        id: 'ASSET-001',
                                        owner: '张三',
                                        name: '生产设备A',
                                        info: '型号XK-2000，2023年购入'
                                    };
                                } else if (data.id === 'ASSET-002') {
                                    responseData = {
                                        id: 'ASSET-002',
                                        owner: '李四',
                                        name: '办公电脑B',
                                        info: '联想ThinkPad X1 Carbon，2024年购入'
                                    };
                                } else if (Math.random() > 0.3) {
                                    responseData = {
                                        id: data.id,
                                        owner: Math.random() > 0.5 ? '王五' : '赵六',
                                        name: `资产-${Math.floor(Math.random() * 1000)}`,
                                        info: '这是一个示例资产信息'
                                    };
                                } else {
                                    responseData = null; // 资产不存在
                                }
                            } else if (action === 'transfer') {
                                responseData = {
                                    id: data.id,
                                    owner: data.owner
                                };
                            }
                            
                            resolve({
                                success: true,
                                data: responseData
                            });
                        } else {
                            let errorMessage = '';
                            
                            if (action === 'create') {
                                errorMessage = '资产ID已存在，请选择其他ID';
                            } else if (action === 'query') {
                                errorMessage = '未找到指定资产';
                            } else if (action === 'transfer') {
                                errorMessage = '资产转移失败，可能资产不存在或您没有权限';
                            } else {
                                errorMessage = '操作失败，请重试';
                            }
                            
                            resolve({
                                success: false,
                                message: errorMessage
                            });
                        }
                    } catch (error) {
                        reject(error);
                    }
                }, 800); // 模拟0.8秒的API响应时间
            });
        }
    </script>
</body>
</html>
    